<template>
	<el-form ref="loginFormRef" :model="state.ruleForm" size="large" class="login-content-form modern-form">
		<el-form-item class="login-animation1">
			<el-input v-model="state.ruleForm.Account" placeholder="请输入工号登录" clearable autocomplete="off" class="login-input">
				<template #prefix>
					<el-icon class="input-icon">
						<User />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>

		<el-form-item class="login-animation2">
			<el-input
				v-model="state.ruleForm.Password"
				type="password"
				placeholder="请输入密码登录"
				show-password
				clearable
				autocomplete="off"
				class="login-input"
				@keyup.enter="onSignIn"
			>
				<template #prefix>
					<el-icon class="input-icon">
						<Lock />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>

		<el-form-item class="login-animation3 remember-row">
			<!--			<el-checkbox v-model="state.ruleForm.RememberMe" class="remember-checkbox">记住我的账号</el-checkbox>-->
			<span class="forgot-password" @click="handleForgotPassword">忘记密码？</span>
		</el-form-item>

		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" :loading="state.loading.signIn" @click="onSignIn" size="large">
				<span v-if="!state.loading.signIn">立即登录</span>
				<span v-else>正在验证...</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts" name="loginAccount">
import { reactive, getCurrentInstance, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { User, Lock } from '@element-plus/icons-vue';
import ElMessage from 'element-plus/es/components/message/index';
import loginapi from '/@/api/login';
import { useLogin } from '/@/hooks/useLogin';

// 定义事件
const emit = defineEmits(['loading-change']);

// 定义变量内容
const router = useRouter();
const loginFormRef = ref();
const ci = getCurrentInstance() as any;
const { handleLoginSuccess } = useLogin(ci);

const state = reactive({
	isShowPassword: false,
	ruleForm: {
		Account: '',
		Password: '',
		Tenant: '',
		RememberMe: false,
	},
	loading: {
		signIn: false,
	},
});

// 处理忘记密码
const handleForgotPassword = () => {
	ElMessage.warning('请联系管理员');
};

// 登录
const onSignIn = async () => {
	// 简单验证
	if (!state.ruleForm.Account || !state.ruleForm.Password) {
		ElMessage.warning('请输入账号和密码');
		return;
	}

	state.loading.signIn = true;
	emit('loading-change', true);

	try {
		await loginapi()
			.signIn(state.ruleForm)
			.then(async (res) => {
				if (res.Code === 200) {
					await handleLoginSuccess(res.Data.access_token, emit);
				} else {
					ElMessage.error(res.Message);
				}
			});
	} catch (error: any) {
		console.error('登录失败:', error);
	} finally {
		state.loading.signIn = false;
		emit('loading-change', false);
	}
};

onMounted(() => {
	if (router.currentRoute.value.query._remotetoken) {
		state.loading.signIn = true;
		emit('loading-change', true);

		loginapi()
			.signInSSO(router.currentRoute.value.query._remotetoken)
			.then(async (res) => {
				await handleLoginSuccess(res.Data.access_token, emit);
			})
			.catch(() => {
				ElMessage.error('SSO登录失败');
			})
			.finally(() => {
				state.loading.signIn = false;
				emit('loading-change', false);
			});
	}
});
</script>

<style scoped>
/* 简化的输入框修复样式 */

/* 登录表单容器 */
.login-content-form {
	width: 100%;
}

/* 表单项样式 */
.login-content-form .el-form-item {
	margin-bottom: 1.5rem;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.login-content-form .el-form-item__content {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 记住我行样式 */
.remember-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem !important;
}

.remember-row .el-form-item__content {
	flex: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.remember-checkbox {
	color: var(--login-text-secondary);
}

.forgot-password {
	color: var(--login-text-secondary);
	font-size: 0.875rem;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.forgot-password:hover {
	color: var(--login-primary);
	text-decoration: underline;
}

/* 输入框样式 - 基于 text-color-test.html 的成功方案 */
.login-input {
	height: 56px;
	position: relative;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}

.login-input :deep(.el-input) {
	height: 56px;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}

.login-input :deep(.el-input__wrapper) {
	width: 100% !important;
	height: 56px !important;
	background: #ffffff !important;
	border: 2px solid #e5e7eb !important;
	border-radius: 12px !important;
	padding: 0 20px 0 55px !important;
	transition: all 0.3s ease !important;
	box-shadow: none !important;
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
}

.login-input :deep(.el-input__wrapper):hover {
	border-color: var(--login-border-accent) !important;
	transform: translateY(-1px);
}

.login-input :deep(.el-input__wrapper.is-focus) {
	outline: none !important;
	border-color: var(--login-border-accent) !important;
	box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1) !important;
}

/* 输入框内部文字样式 - 强制修复 */
.login-input :deep(.el-input__inner) {
	width: 100% !important;
	height: 52px !important;
	background: transparent !important;
	border: none !important;
	color: #1f2937 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 52px !important;
}

.login-input :deep(.el-input__inner)::placeholder {
	color: #9ca3af !important;
	font-weight: 400 !important;
}

.login-input :deep(.el-input__inner):focus {
	color: #1f2937 !important;
}

/* 强制修复所有可能的文字颜色问题 */
.login-input :deep(.el-input__inner),
.login-input :deep(.el-input__inner):focus,
.login-input :deep(.el-input__inner):active,
.login-input :deep(.el-input__inner):hover,
.login-input :deep(.el-input__inner):valid,
.login-input :deep(.el-input__inner):invalid,
.login-input :deep(.el-input__inner):not(:placeholder-shown) {
	color: var(--login-text-primary) !important;
	background: transparent !important;
}

/* 覆盖任何白色文字样式 */
.login-input :deep(.el-input__inner[style*='color: white']),
.login-input :deep(.el-input__inner[style*='color: #fff']),
.login-input :deep(.el-input__inner[style*='color: #ffffff']) {
	color: var(--login-text-primary) !important;
}

/* 自动填充样式修复 */
.login-input :deep(.el-input__inner:-webkit-autofill),
.login-input :deep(.el-input__inner:-webkit-autofill:hover),
.login-input :deep(.el-input__inner:-webkit-autofill:focus),
.login-input :deep(.el-input__inner:-webkit-autofill:active) {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: #1f2937 !important;
	transition: background-color 5000s ease-in-out 0s !important;
	color: #1f2937 !important;
	font-weight: 500 !important;
	font-size: 14px !important;
}

/* 前缀图标样式 - 修复图标显示问题 */
.login-input :deep(.el-input__prefix) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding-right: 12px !important;
	left: 12px !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
	width: 40px !important;
	height: 40px !important;
}

.login-input :deep(.el-input__prefix .el-icon) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 18px !important;
	transition: all 0.3s ease !important;
	width: 20px !important;
	height: 20px !important;
}

.login-input :deep(.el-input__prefix .input-icon) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 18px !important;
	transition: all 0.3s ease !important;
	width: 20px !important;
	height: 20px !important;
}

.login-input:focus-within :deep(.el-input__prefix .el-icon),
.login-input:focus-within :deep(.el-input__prefix .input-icon) {
	color: #1e40af !important;
	transform: scale(1.05);
}

/* 后缀图标样式 - 修复清除和密码显示按钮 */
.login-input :deep(.el-input__suffix) {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	height: 40px !important;
}

.login-input :deep(.el-input__suffix-inner) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

.login-input :deep(.el-input__suffix-inner .el-input__clear),
.login-input :deep(.el-input__suffix-inner .el-input__password) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 16px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 4px !important;
	background: transparent !important;
	border: none !important;
}

.login-input :deep(.el-input__suffix-inner .el-input__clear):hover,
.login-input :deep(.el-input__suffix-inner .el-input__password):hover {
	color: #1e40af !important;
	background: rgba(30, 64, 175, 0.1) !important;
	transform: scale(1.1);
}

/* 修复Element Plus图标组件 */
.login-input :deep(.el-input__suffix-inner .el-icon) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 16px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 4px !important;
}

.login-input :deep(.el-input__suffix-inner .el-icon):hover {
	color: #1e40af !important;
	background: rgba(30, 64, 175, 0.1) !important;
	transform: scale(1.1);
}

/* 登录按钮样式 */
.login-content-submit {
	width: 100%;
	height: 56px;
	font-size: 0.9rem;
	font-weight: 700;
	border-radius: var(--login-radius-large);
	background: linear-gradient(135deg, var(--login-primary) 0%, var(--login-accent) 100%);
	border: 2px solid var(--login-primary);
	color: white !important;
	box-shadow: var(--login-shadow-base);
	transition: all 0.3s ease;
	margin-top: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.login-content-submit:hover {
	background: linear-gradient(135deg, var(--login-primary-hover) 0%, var(--login-accent) 100%);
	transform: translateY(-2px);
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	border-color: var(--login-primary-hover);
}

.login-content-submit:active {
	transform: translateY(-1px);
}

.login-content-submit.is-loading {
	background: var(--login-text-secondary);
	border-color: var(--login-text-secondary);
	cursor: not-allowed;
	transform: none;
}

.login-content-submit.is-loading:hover {
	background: var(--login-text-secondary);
	transform: none;
	box-shadow: var(--login-shadow-base);
	border-color: var(--login-text-secondary);
}

/* 全局强制修复 - 确保所有输入框文字可见 */
input,
.el-input input,
.el-input__inner {
	color: #1f2937 !important;
}

input:focus,
input:active,
input:hover,
.el-input input:focus,
.el-input input:active,
.el-input input:hover,
.el-input__inner:focus,
.el-input__inner:active,
.el-input__inner:hover {
	color: #1f2937 !important;
}

/* 覆盖任何白色文字样式 */
input[style*='color: white'],
input[style*='color: #fff'],
input[style*='color: #ffffff'],
.el-input__inner[style*='color: white'],
.el-input__inner[style*='color: #fff'],
.el-input__inner[style*='color: #ffffff'] {
	color: #1f2937 !important;
}

/* 强制修复所有图标显示 */
.el-icon,
.el-input__prefix .el-icon,
.el-input__suffix .el-icon,
.el-input__suffix-inner .el-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 修复Element Plus内置图标 */
.el-input__clear,
.el-input__password {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 动画效果 */
.login-animation1 {
	animation: slideInUp 0.6s ease-out;
}

.login-animation2 {
	animation: slideInUp 0.6s ease-out 0.1s both;
}

.login-animation3 {
	animation: slideInUp 0.6s ease-out 0.2s both;
}

.login-animation4 {
	animation: slideInUp 0.6s ease-out 0.3s both;
}

@keyframes slideInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 暗黑模式下的特殊处理 */
[data-theme='dark'] .login-input :deep(.el-input__wrapper) {
	background: #1e293b !important;
	border-color: #475569 !important;
}

[data-theme='dark'] .login-input :deep(.el-input__inner) {
	color: #f9fafb !important;
}

[data-theme='dark'] .login-input :deep(.el-input__inner)::placeholder {
	color: #6b7280 !important;
}

[data-theme='dark'] .login-input :deep(.el-input__prefix .el-icon),
[data-theme='dark'] .login-input :deep(.el-input__prefix .input-icon) {
	color: #9ca3af !important;
}

[data-theme='dark'] .login-input:focus-within :deep(.el-input__prefix .el-icon),
[data-theme='dark'] .login-input:focus-within :deep(.el-input__prefix .input-icon) {
	color: #3b82f6 !important;
}

[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill),
[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill:hover),
[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill:focus),
[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill:active) {
	-webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
	-webkit-text-fill-color: #f9fafb !important;
}

/* 暗黑模式下的后缀图标 */
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__clear),
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__password),
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-icon) {
	color: #9ca3af !important;
}

[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__clear):hover,
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__password):hover,
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-icon):hover {
	color: #3b82f6 !important;
	background: rgba(59, 130, 246, 0.1) !important;
}

/* 调试样式 - 确保所有元素可见 */
.login-content-form,
.login-content-form *,
.el-form,
.el-form *,
.el-form-item,
.el-form-item *,
.el-input,
.el-input *,
.login-input,
.login-input * {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.el-input,
.login-input {
	width: 100% !important;
}

.el-form-item__content {
	width: 100% !important;
	display: block !important;
}

/* 特别针对第一个输入框 */
.login-animation1,
.login-animation1 .el-form-item__content,
.login-animation1 .el-input,
.login-animation1 .login-input {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
}
</style>
